<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent> </template>
        </comHead>
        <view class="content_box pd-30">
            <view class="top">
                <image class="images" src="https://cdn.oss.bon-top.cn/static_bc/images/warning_img.png"
                    mode="scaleToFill">
                </image>
                <view class="title ft-28 c-33 fw-800 mt-20">注销账号</view>
                <view class="tip c-99 ft-22 mt-20">
                    如您有任何疑问，可以联系我们的客服<br />
                    <text class="" style="color: #1F18EE;">0755-8938 5111</text>
                    处理。
                </view>
            </view>
            <view class="text_box bd-r40 pd-20 mt-30">
                <view class="ft-28 c-33 fw-800">注销说明</view>
                <view class="">

                    <view></view>
                </view>
            </view>

        </view>
        <view :style="{ height: (196 + 68) + 'rpx' }"></view>
        <view class="btn_box">
            <view class="box" style="height: 196rpx;">
                <view class="btn flex-center fw-800 c-33">
                    <image class="icons mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/kf_icon.png"
                        mode="scaleToFill">
                    </image>
                    在线联系客服
                </view>
                <view class="btn add" @click="submit()">同意注销</view>
            </view>

        </view>
    </view>

</template>
<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
let datasObj = reactive({
    title: '注销账号',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const submit = () => {
    // 注销
    utils.request(api.deleteAccount, {}, 'get').then(res => {
        if (res.code == 200) {
            uni.showToast({ title: `注销成功`, icon: 'none' })
            uni.navigateTo({ url: '/pages/mine/mine'})
        }


    })
}
onLoad(() => {
})
</script>
<style lang="scss" scoped>
.content_box {
    border-top: 2rpx solid #F1F1F1;

    .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60rpx;

        .tip {
            text-align: center;

        }

        .images {
            width: 76rpx;
            height: 76rpx;
        }
    }

    .text_box {
        background: #F8F8F8;
        min-height: 300rpx;
    }
}

.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .icons {
        width: 28rpx;
        height: 28rpx;
    }

    .center {
        width: 100%;
        text-align: center;
    }

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 100%;
        height: 78rpx;
        // background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 20rpx 30rpx 0;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            width: 100%;
            color: #DBF046;
            background-color: #333333;
        }

    }
}

.delete_box {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;


    .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.5;
        top: 0;
        left: 0;
    }

    .delete_model {
        position: absolute;
        background-color: #fff;
        text-align: center;
        width: 518rpx;
        // height: 386rpx;
        top: calc(50% - (386rpx / 2));
        left: calc(50% - (518rpx / 2));

        .text {
            // padding: 20rpx;
            min-height: 140rpx;
        }

        .btn_model {
            margin-bottom: 30rpx;

            .btn {
                width: 184rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 20rpx;
                font-size: 28rpx;
                color: #333;
                background-color: #F8F8F8;
            }

            .sunbmit {
                background-color: #333;
                color: #DBF046;
            }
        }
    }

}
</style>